<template>
  <div class="relative w-full h-full">
    <!-- 查询条件 -->
    <div class="flex_aic flex-wrap gap-16">
      <el-input
        v-model="queryParams.name"
        :placeholder="$t('couponManagement.pleaseEnterCouponName')"
        style="width: 256px"
      >
        <template #prefix>
          <span class="color-555555">{{ $t('couponManagement.couponName') }}</span>
        </template>
      </el-input>

      <!-- <el-select
        v-model="queryParams.status"
        placeholder="活动状态"
        style="width: 200px"
      >
        <el-option label="全部" value="" />
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select> -->

      <!-- <el-select
        v-model="queryParams.type"
        placeholder="优惠券类型"
        style="width: 200px"
      >
        <el-option label="全部" value="" />
        <el-option label="满减券" value="1" />
        <el-option label="折扣券" value="2" />
      </el-select> -->

      <el-date-picker
        v-model="queryParams.activityTime"
        type="daterange"
        :range-separator="$t('datePick.至')"
        :start-placeholder="$t('couponManagement.startDate')"
        :end-placeholder="$t('couponManagement.endDate')"
        style="width: 320px"
      />

      <el-select
        v-model="queryParams.getType"
        :placeholder="$t('couponManagement.getType')"
        style="width: 200px"
      >
        <el-option :label="$t('common.all')" value="" />
        <el-option
          v-for="item in getTypeOptions"
          :key="item.value"
          :label="$t(item.label)"
          :value="item.value"
        />
      </el-select>

      <el-date-picker
        v-model="queryParams.useTime"
        type="daterange"
        :range-separator="$t('datePick.至')"
        :start-placeholder="$t('couponManagement.startDate')"
        :end-placeholder="$t('couponManagement.endDate')"
        style="width: 320px"
      />

      <div class="flex_aic">
        <el-button @click="resetQuery">{{ $t('couponManagement.reset') }}</el-button>
        <el-button type="primary" @click="handleQuery">{{ $t('couponManagement.search') }}</el-button>
      </div>
    </div>

    <!-- 工具栏 -->
    <div class="mt12 toolbar flex_aic_jcsb">
      <div class="addBtn flex_aic_jcc" @click="handleAdd">
        <SvgIcon name="iconxinzeng" class="mr8" />
        <span>{{ $t('couponManagement.addCoupon') }}</span>
      </div>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      border
      v-loading="loading"
    >
      <el-table-column type="index" :label="$t('common.序号')" width="60" />
      <el-table-column prop="name" :label="$t('couponManagement.couponName')" />
      <el-table-column prop="type" :label="$t('couponManagement.couponType')" />
      <el-table-column prop="content" :label="$t('couponManagement.discountContent')" />
      <el-table-column :label="$t('couponManagement.receivedUsedPublished')">
        <template #default="{ row }">
          <div style="color: #ff7e28; font-size: 14px">
            {{ row.received }}/{{ row.used }}/{{ row.published }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="activityTime" :label="$t('couponManagement.activityTime')" />
      <el-table-column prop="useTime" :label="$t('couponManagement.useTime')" />
      <el-table-column
        prop="getType"
        :label="$t('couponManagement.getType')"
        :formatter="formatGetType"
      />
      <el-table-column
        prop="status"
        :label="$t('couponManagement.activityStatus')"
        :formatter="formatStatus"
      />
      <el-table-column :label="$t('couponManagement.recommend')">
        <template #default="{ row }">
          <el-switch
            v-model="row.recommend"
            @change="handleRecommendChange(row)"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('couponManagement.operation')" width="200">
        <template #default="{ row }">
          <div class="flex_aic_jcc">
            <div class="operationBtn">
              <el-button type="text" @click="handleView(row)">{{ $t('couponManagement.view') }}</el-button>
            </div>
            <div class="operationBtn">
              <el-button type="text" @click="handleCopy(row)">{{ $t('couponManagement.copy') }}</el-button>
            </div>
            <el-button type="text" @click="handleInvalid(row)">{{ $t('couponManagement.invalid') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import Api from "@/config/api/api";

const router = useRouter();
const { t } = useI18n();

// 领取方式选项
const getTypeOptions = [
  { label: "couponManagement.freeCollection", value: "1" },
  { label: "couponManagement.activityGift", value: "2" },
];

// 活动状态选项
const statusOptions = [
  { label: "couponManagement.inProgress", value: "1" },
  { label: "couponManagement.ended", value: "2" },
];

// 格式化方法
const formatStatus = ({ status }) => {
  const found = statusOptions.find((item) => item.value === status);
  return found ? t(found.label) : status;
};

const formatGetType = ({ getType }) => {
  const found = getTypeOptions.find((item) => item.value === getType);
  return found ? t(found.label) : getType;
};

// 查询参数
const queryParams = ref({
  name: "",
  status: "",
  type: "",
  activityTime: [],
  getType: "",
  useTime: [],
});

// 分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 表格数据
const tableData = ref([]);
const loading = ref(false)
// 方法
const resetQuery = () => {
  queryParams.value = {
    name: "",
    status: "",
    type: "",
    activityTime: [],
    getType: "",
    useTime: [],
  };
};

const handleQuery = () => {
  getTableData();
};

const handleAdd = () => {
  router.push("/manage_product/coupon/add");
};

const handleView = (row) => {
  router.push({
    path: "/manage_product/coupon/detail",
    query: { id: row.id },
  });
};

const handleCopy = (row) => {
  // 实现复制逻辑
};

const handleInvalid = (row) => {
  // 实现失效逻辑
};

const handleRecommendChange = (row) => {
  // 实现推荐状态变更逻辑
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  handleQuery();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleQuery();
};

const getTableData = async () => {
  loading.value = true
  const res = await Api.coupon_list({
    page: currentPage.value - 1,
    pageSize: pageSize.value,
    type: 1,
  });
  tableData.value = res.data?.content;
  total.value = Number(res.data.totalElements || 0);
  loading.value = false
}

onMounted(() => {
  getTableData();
});
</script>

<style lang="scss" scoped>
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}

.operationBtn {
  display: flex;
  align-items: center;
  padding-right: 5px;

  &::after {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    background: #ddd;
    margin-left: 5px;
  }
}
</style>
